<div class="w-60 h-full shadow-md bg-white absolute" id="sidenav">
	<ul class="relative px-1">
		{volist name="_sidebar_menus" id="sidebar_menu"}
		{empty name="sidebar_menu.child"}
		<li class="relative">
			<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-blue-600 hover:bg-blue-50 transition duration-300 ease-in-out" href="{$sidebar_menu.url_value|admin_url}" data-mdb-ripple="true" data-mdb-ripple-color="primary">
				<span>{$sidebar_menu.title}</span>
			</a>
		</li>
		{else /}
		<li class="relative" id="sidenavSecEx2">
			<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-blue-600 hover:bg-blue-50 transition duration-300 ease-in-out cursor-pointer {if $i !=1} collapsed {/if}" data-mdb-ripple="true" data-mdb-ripple-color="primary" data-bs-toggle="collapse" data-bs-target="#collapseSidenavSecEx2" aria-expanded="false" aria-controls="collapseSidenavSecEx2">
				<span>{$sidebar_menu.title}</span>
				<svg aria-hidden="true" focusable="false" data-prefix="fas" class="w-3 h-3 ml-auto" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
					<path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
				</svg>
			</a>
			<ul class="relative accordion-collapse {if $i ==1} show {/if}" id="collapseSidenavSecEx2" aria-labelledby="sidenavSecEx2" data-bs-parent="#sidenavSecExample">
				{volist name="sidebar_menu.child" id="submenu"}
				<li class="relative">
					<a href="{$submenu.url_value|admin_url}" class="flex items-center text-xs py-4 pl-12 pr-6 h-6 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-blue-600 hover:bg-blue-50 transition duration-300 ease-in-out" data-mdb-ripple="true" data-mdb-ripple-color="primary">{$submenu.title}</a>
				</li>
				{/volist}
			</ul>
		</li>
		{/empty}
		{/volist}
	</ul>
	<div class="text-center bottom-0 absolute w-full">
		<hr class="m-0">
		<p class="py-2 text-sm text-gray-700">tailwind-elements.com</p>
	</div>
</div>